<template>
  <div>
    <!--搜索栏-->
    <form action="#" @submit.prevent>
      <i class="iconfont icon-sou searchIcon" ref="icon"></i>
      <input type="text" ref="input" class="search_ipt" @keyup='search' :placeholder="fontContent" @click="focusHandle">
    </form>
    <!--tab栏-->
    <div class="tab">
      <ul ref="ul">
        <li click="tabSwitch(index)" v-for="(menuItem,index1) in findMenu" class="lis">
          <a @click="navList(menuItem.dictValue,menuItem.dictId)"  v-for="(item,index2) in imgs" v-if="index1==index2">
            <img :src="item.imgUrl" alt="">
          </a>
          <span>{{menuItem.dictValue}}</span>
        </li>
      </ul>
    </div>
    <!--两部分-->
    <div class="container clear">
      <div class="same left">
      </div>
      <div class="same right" @click="activities('game')">
      </div>
    </div>
    <!--好券享不停-->
    <div class="box">
      <div class="box_banner padding_lr whiteBg">
        <coupon-img :divStyle="0" :bannerArry='couponBanner'></coupon-img>
      </div>
    </div>
  </div>
</template>
<script>
  import getData2 from '../../service/getData2.js'
  import CouponImg from './couponImg.vue'
  import * as types from "../../vuex/types.js";
  import store from 'src/vuex/index.js';
  import {Storage} from "src/utils/storage.js";

  export default {
    data: () => ({
      scroll: '',
      indexTab: 0,
      fontContent: "小主，今天找啥券~",
      findMenu: [],
      couponBanner: [],
      imgs: [
        {imgUrl: require('./images/meishi.png')},
        {imgUrl: require('./images/life.png')},
        {imgUrl: require('./images/yule.png')},
        {imgUrl: require('./images/shopping.png')},
        {imgUrl: require('./images/beauty.png')},
        {imgUrl: require('./images/healthcare.png')},
        {imgUrl: require('./images/parenting.png')},
        {imgUrl: require('./images/eShop.png')}
      ]
    }),
    components: {
      CouponImg
    },
    created() {
      this.findHead();
      this.newCouponBanner();
    },
    mounted() {
        this.$nextTick(()=>{
            this.slide();
            this.iconAnimate();
        })
    },
    methods: {
      //tab类型数据
      findHead: function () {
        var me = this;
        getData2.findType({}).then(function (rep) {
          me.findMenu = rep.content.info;
        });
      },
      //tab类型由后向前滚动
      slide:function(){
        setTimeout(()=>{
          if(this.$refs.ul){
            this.$refs.ul.style.transform = 'translateX(' + 27 + 'rem)';
            this.$refs.ul.style.transition = "transform 1s";
          }
        },800)
      },
      //切换
      tabSwitch: function (num) {
        this.indexTab = num;
      },
      //好券享不停
      newCouponBanner: function () {
        var self = this;
        getData2.newCouponBanner({}).then(function (rep) {
          self.couponBanner = rep.content;
        });
      },
      //点击搜索跳转
      focusHandle() {
        this.$router.push({
           name: 'search',
           query: {type: 'home'}
       })
        this.$store.commit('search_type', 'coupon')//保证每次进去都是券
      },
      //点击八大类
      navList: function (key, upperDictId) {
            this.$store.commit('search_type', 'coupon', true)//保证每次进去都是券
            this.$store.commit("search_key", '');
            let me = this;
            me.$store.commit("coupon_tit", key);
            me.$store.commit(types.GET_PAGE_NUM, 1); // 重置分页为1
            getData2.upperDictId({}, upperDictId).then(function (rep) {
                Storage.set("menuArr", rep.content, true);
                Storage.set(
                    "menuArrMess",
                    {
                        menuArrId: upperDictId,
                        tit: key
                    },
                    true
                );
                me.$router.push({
                    name: "couponSearch"
                });
            });
      },
     //挖宝游戏
      activities(type) {
            if (type === "game") {
                this.$router.push({
                    name: "game",
                    params: {
                        id: 1
                    } // 铲子id 1
                });
            }
      }
    }
  }
</script>

<style lang="scss" scoped="scoped">
  .bg_body {
    /*height:100%;*/
    background-color: white;
  }

  /*<!--搜索-->*/
  form {
    padding-top: .8rem;
  }

  .searchIcon {
    position: absolute;
    top: 1.3rem;
    left: 8.7rem;
    z-index: 100;
    font-size:1.1rem;
  }

  .search_ipt {
    width: 93.5%;
    height: 2.2rem;
    margin: auto;
    position: relative;
    box-shadow: -4px 0px 4px #f0f0f0, //左边
    0px -4px 4px #f0f0f0, //上
    4px 0px 4px #f0f0f0, //右
    0px 4px 4px #f0f0f0; //下
    border-radius: 20px;
    text-indent:1rem;
  }

  .search_ipt::-webkit-input-placeholder {
    padding-left: 8.5rem;
    font-size:.9rem;
    color: #999999;
  }

  /*tab栏*/
  .tab {
    height: 6rem;
    line-height: 8rem;
    margin-top: 1.1rem;
    overflow-x: scroll;
    overflow-y: hidden;
  }

  /*隐藏ul下面的滚动条*/
  .tab::-webkit-scrollbar {
    display: none;
    width:0px;
  }

  .tab ul {
    width:55rem;
    margin-left:-27rem;
  }
  .tab li {
    float: left;
    width:12.5%;
    text-align: center;
    color: #444;
    font-size: 1rem;
    position: relative;
    left:-.4rem;
  }

  .tab li span {
    display: inline-block;
    padding: .9rem 0.2rem;
    color: #4a4a4a;
    font-weight: 400;
  }

  img {
    width: 3.4rem;
    height: 3.4rem;
    display: block;
    position: absolute;
    top: 19%;
    left:48%;
    margin: -1.5rem 0 0 -1.5rem;
  }

  /*两部分*/
  .clear:after {
    content: '';
    display: block;
    clear: both;
    height: 0;
    overflow: hidden;
    visibility: hidden;
  }

  .clear {
    zoom: 1;
  }

  .container {
    margin:.8rem 0 .7rem 0;
    padding: .5rem .55rem;
    .same {
      width: 50%;
      height: 6.2rem;
    }
    .left {
      float: left;
      background-size: cover;
      background-repeat: no-repeat;
      background-image: url('./images/everygift.png');
    }
    .right {
      float: right;
      background-size: cover;
      background-repeat: no-repeat;
      background-image: url('./images/game.png');
    }
  }

  /*好券享不停*/
  .box {
    width: 100%;
    height: 7rem;
    background-color: #f5f5f5;
    padding: .65rem;
    .box_banner {
      width: 100%;
      height: 100%;
      /*line-height: 4.3rem;*/
      text-align: center;
      background-color: #ffffff;
      color: #4a90e2;
      font-weight: 400;
      font-size: 1.4rem;
    }
  }
</style>